<template>
  <div class="app-container">
    <div class="har-container word_break__break_all">
      <div class="item" v-for="(item, index) in harList">
        <div class="tips">
          <p>{{ item.tips }}</p>
        </div>
        <div class="num">
          <p>{{ item.value }}</p>
        </div>
      </div>
    </div>
    <div class="main">
      <el-table class="g-el-table" :data="list" v-loading="listLoading">
        <el-table-column label="头像" prop="deviceCode" width="80px">
          <div slot-scope="{row}" class="profile_picture_warp">
            <img src="" v-if="profilePictureSrc(row)">
            <div v-else></div>
          </div>
        </el-table-column>
        <el-table-column label="昵称" width="80px">
          <template slot-scope="{row}">
            <span>{{ row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色权限" width="110px">
          <template slot-scope="{row}">
            <span>{{ row.shipStatus | shipstatusFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="80px">
          <template slot-scope="{row}">
            <span>{{ row.author }}</span>
          </template>
        </el-table-column>
        <el-table-column label="加入时间" width="95">
          <template slot-scope="{row}">
            <span>{{ row.createdDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="95">
          <template slot-scope="{row}">
            <span :class="{
              cell_ships_warp: true,
              blue: row.bindStatus === 'K', red: row.bindStatus === 'O', grey: row.bindStatus === 'T',
            }">{{ row.bindStatus | bindStatusFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="text" @click="handleViewUser(row)">查看用户</el-button>
            <!-- <el-button type="text" @click="handleUnbind(row)">解绑</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <np-pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
        @pagination="getList" />

    </div>
  </div>
</template>

<script>
import { getMembersByDeviceCode } from '@/api/family-and-users-management/index'
import { getGroupGetMemberShip, setGroupUnbindGroupMember } from '@/api/family-and-users-management/family-information'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'

export default {
  name: 'ComplexTable',
  directives: { waves },
  filters: {
    shipstatusFilter(status) {
      // 家庭圈用户角色，1 管理员 ，2 成员 ，3 虚拟用户
      const statusMap = {
        1: '管理员',
        2: '成员',
        3: '虚拟用户'
      }
      return statusMap[status]
    },
    bindStatusFilter(status) {
      // 成员状态，都是大写 O: 待加入 K： 已加入 T: 踢出
      const statusMap = {
        O: '待加入',
        K: '已加入',
        T: '踢出'
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        deviceCode: '',

        brand: undefined,
        storage: undefined,

        importance: undefined,
        title: undefined,
        type: undefined,
      },
    }
  },
  computed: {
    harList() {
      let userObj = this.$route.query;
      let arr1 = [{
        tips: '成员 (人)',
        val: ''
      }, {
        tips: '所属品牌',
        val: 'menufacturerName'
      }, {
        tips: '所在地区',
        val: 'address'
      }, {
        tips: '创建时间',
        val: 'createdDate'
      }]
      let arr2 = []
      arr1.forEach((el, index) => {
        if (index === 0) {
          arr2.push({
            tips: el.tips,
            value: this.total ? this.total - 1 : 0
          })
          return
        }
        let row = 1
        arr2.push({
          tips: el.tips,
          value: userObj[el.val] || '',
        })
      })
      return arr2
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true
      let { groupId = '', deviceCode = '' } = this.$route.query;
      groupId = parseInt(groupId) || 0
      // getGroupGetMemberShip
      getMembersByDeviceCode({ deviceCode }).then(res => {
        if (res.code === 200) {
          //列表数量为 total - 1
          this.list = res.data
          this.total = res.data?.length || 0
        }

        // Just to simulate the time of the request
        this.listLoading = false
      })
    },
    profilePictureSrc(row) {
      try {
        let base_url = process.env.VUE_APP_IMG_BASE_URL,
          url = row.headUrl;
        if (url) {
          return `${base_url}/${url}`
        }
      } catch (error) { }
      return ""
    },
    handleUnbind(row) {
      let params = {
        groupId: row.groupId,
        membername: row.userName,
      }
      this.$confirm('请谨慎操作，确认解绑？')
        .then(() => {
          setGroupUnbindGroupMember(params).then(res => {
            if (res.code === 200) {
              this.$message.success(`解绑成功!`)
              this.getList()
              return
            }
            this.$message.error(res.message || '解绑失败。')
          }).catch(err => {
            this.$message.error('系统错误，服务失败。')
          })
        })
        .catch(_ => { });
    },
    handleViewUser(row) {
      // id 家庭圈成员用户id
      // userId 用户id
      this.$router.push({
        path: `/family-and-users/user/member`,
        query: {
          id: row.userId || '',
          deviceCode: row.deviceCode || '',
        }
      })
    },
  }
}
</script>
<style scoped lang="scss">
.har-container {
  display: grid;
  grid-gap: 20px 20px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 16px;

  .item {
    padding: 20px 24px;

    .tips {
      font-size: 14px;
      line-height: 18px;
      color: #8B8B8B;
    }

    .num {
      font-size: 28px;
      font-weight: 500;
      line-height: 36px;
      color: #15181D;
    }
  }
}

.profile_picture_warp {
  display: flex;
  justify-content: center;
  align-items: center;

  @mixin com_img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  img {
    @include com_img;
  }

  div {
    @include com_img;
    background: #CCCCCC;
  }
}

.main {
  background-color: #fff;
  border-radius: 16px;
  padding: 20px;
}

.cell_ships_warp {
  font-size: 14px;
  line-height: 18px;

  &.blue {
    color: #2BA471;
  }

  &.red {
    color: #FF2D55;
  }

  &.grey {
    color: #8B8B8B;
  }
}
</style>